<script setup lang="ts">
import TheTop from './components/TheTopView.vue'
import SearchView from '@/views/search/SearchView.vue'
import { useToggleShow } from '@/biz/hooks/useToggle'
const recommends = [
  {
    value: 1,
    label: '牛腩'
  },
  {
    value: 2,
    label: '色拉'
  },
  {
    value: 3,
    label: '奶茶'
  },
  {
    value: 4,
    label: '西瓜汁'
  }
]
const [initState, showSearchView] = useToggleShow(false)
</script>

<template>
  <div class="home-page">
    <Transition name="fade">
      <SearchView v-if="initState" @cancle="showSearchView" />
    </Transition>
    <TheTop :recommends="recommends" @searchClick="showSearchView" />
  </div>
</template>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
@/biz/hooks/useToggle
